﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <style>
        body {
            overflow: auto;
            margin: 0;
            padding: 0;
        }

        #mypan {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0px solid purple;
            background: #fefefe;
        }

        .pane {
            position: absolute;
            width: 199px;
            height: 99px;
            top: 100px;
            left: 100px;
            margin: 0;
            padding: 0;
            z-index: 99;
            border: 1px solid purple;
            background: #fefefe;
        }

        .title {
            font-family: monospace;
            background: purple;
            color: white;
            font-size: 24px;
            height: 100%;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="mypan" style="background: url()">
        <div id="ppm1" class="pane" style="left:100px"></div>
        <div id="ppm2" class="pane" style="left:200px"></div>
    </div>



    <script>
        /*
     * @author https://twitter.com/blurspline / https://github.com/zz85
     * See post @ http://www.lab4games.net/zz85/blog/2014/11/15/resizing-moving-snapping-windows-with-js-css/
     */
        "use strict";

        //cesium 三维的影响结构数据 -->
        // 初始化地图

        var DragMoveManger = (function () {
            // 初始化
            function DragMoveManger() {
                // 属性
                this.minWidth = 199;
                this.minHeight = 99;

                this.MARGINS = 6;

                this.redraw = false;

                this.clicked = null;

                this.event = null;

                this.boundRect;
                this.offSetX;
                this.offSetY;


                this.onRightEdge;
                this.onBottomEdge;
                this.onLeftEdge;
                this.onTopEdge;

                this.rightScreenEdge;
                this.bottomScreenEdge;

                this.dmmpan;
            };
            DragMoveManger.prototype.adddiv = function (options) {
                // Minimum resizable area
                var that = this;

                // Thresholds

                // End of what's configurable.


                var pane = $('#' + options.id)[0];
                that.dmmpan = pane;

                function setBounds(element, x, y, w, h) {
                    element.style.left = x + 'px';
                    element.style.top = y + 'px';
                    element.style.width = w + 'px';
                    element.style.height = h + 'px';
                }

                // Mouse events
                pane.addEventListener('mousedown', onMouseDown);
                pane.addEventListener('mousemove', function (e) {

                    if (!(that.clicked)) {
                        that.dmmpan = e.target;
                    }
                });

                //document.addEventListener('mousemove', onMouseMove);
                //document.addEventListener('mouseup', onMouseUp);

                function onMouseDown(e) {

                    that.dmmpan = e.target;
                    that.calc(e);
                    var isResizing = that.onRightEdge || that.onBottomEdge || that.onTopEdge || that.onLeftEdge;
                    that.clicked = {
                        x: that.offSetX,
                        y: that.offSetY,
                        cx: e.clientX,
                        cy: e.clientY,
                        w: that.boundRect.width,
                        h: that.boundRect.height,
                        isResizing: isResizing,
                        isMoving: !isResizing && that.canMove(),
                        onTopEdge: that.onTopEdge,
                        onLeftEdge: that.onLeftEdge,
                        onRightEdge: that.onRightEdge,
                        onBottomEdge: that.onBottomEdge
                    };
                    e.preventDefault();
                    if (that.onSelect) {
                        that.onSelect(e.target);
                    }
                }
            }

            /*
            */
            DragMoveManger.prototype.canMove = function (options) {
                var that = this;
                return that.offSetX > 0 && that.offSetX < that.boundRect.width && that.offSetY > 0 && that.offSetY < that.boundRect.height;

            }
            DragMoveManger.prototype.init = function (options) {

                var that = this;

                $("#mypan").on('mousemove', onMouseMove);
                $("#mypan").on('mouseup', onMouseUp);

                function onMouseMove(moveevent) {
                    that.calc(moveevent);
                    that.event = moveevent;
                    that.redraw = true;
                }

                function animate() {

                    requestAnimationFrame(animate);

                    if (!that.redraw)
                        return;

                    that.redraw = false;

                    if (that.clicked && that.clicked.isResizing) {

                        if (that.clicked.onRightEdge)
                            that.dmmpan.style.width = Math.round(parseInt(Math.max(that.offSetX, that.minWidth) / 10) * 10) - 1 + 'px';
                        if (that.clicked.onBottomEdge)
                            that.dmmpan.style.height = Math.round(parseInt(Math.max(that.offSetY, that.minHeight) / 10) * 10) - 1 + 'px';;
                        //Math.max(that.offSetY, that.minHeight) + 'px';

                        //还有问题，最后修改
                        if (that.clicked.onLeftEdge) {
                            var currentWidth = Math.max(that.clicked.cx - that.event.clientX + that.clicked.w, that.minWidth);
                               if (currentWidth > that.minWidth) {
                                that.dmmpan.style.left = parseInt(that.event.clientX / 10) * 10 + 'px';
                                that.dmmpan.style.width = currentWidth + 'px';

                                console.info(that.dmmpan.style.left, that.dmmpan.style.width);
                            }

                        }

                        if (that.clicked.onTopEdge) {
                            var currentHeight = Math.max(that.clicked.cy - that.event.clientY + that.clicked.h, that.minHeight);
                            if (currentHeight > that.minHeight) {
                                that.dmmpan.style.top = parseInt(that.event.clientY / 10) * 10 + 'px';
                                that.dmmpan.style.height = parseInt(currentHeight / 10) * 10 + 'px';

                            }
                        }

                        return;
                    }

                    if (that.clicked && that.clicked.isMoving) {
                        // Math.round((e.pageX - orgX) / 10) * 10;
                        //console.info(parseInt(that.event.clientY - that.clicked.y) / 10);
                        that.dmmpan.style.top = Math.round(parseInt((that.event.clientY - that.clicked.y) / 10) * 10) + 'px';
                        that.dmmpan.style.left = Math.round(parseInt((that.event.clientX - that.clicked.x) / 10) * 10) + 'px';
                        // moving
                        // that.dmmpan.style.top = (that.event.clientY - that.clicked.y) + 'px';
                        // that.dmmpan.style.left = (that.event.clientX - that.clicked.x) + 'px';

                        return;
                    }

                    // This code executes when mouse moves without clicking

                    // style cursor
                    // console.info(that.onRightEdge, that.onBottomEdge, that.onLeftEdge , that.onTopEdge);
                    if (that.onRightEdge && that.onBottomEdge || that.onLeftEdge && that.onTopEdge) {
                        that.dmmpan.style.cursor = 'nwse-resize';
                    } else if (that.onRightEdge && that.onTopEdge || that.onBottomEdge && that.onLeftEdge) {
                        that.dmmpan.style.cursor = 'nesw-resize';
                    } else if (that.onRightEdge || that.onLeftEdge) {
                        that.dmmpan.style.cursor = 'ew-resize';
                    } else if (that.onBottomEdge || that.onTopEdge) {
                        that.dmmpan.style.cursor = 'ns-resize';
                    } else if (that.canMove()) {
                        that.dmmpan.style.cursor = 'move';
                    } else {
                        that.dmmpan.style.cursor = 'default';
                    }
                }

                animate();

                function onMouseUp(upevent) {
                    that.calc(upevent);
                    that.clicked = null;
                    if (that.onUnSelect) {
                        that.onUnSelect(upevent.target);
                    }
                }
            }
            DragMoveManger.prototype.calc = function (e) {
                var that = this;

                that.boundRect = that.dmmpan.getBoundingClientRect();
                that.offSetX = e.clientX - that.boundRect.left;
                that.offSetY = e.clientY - that.boundRect.top;

                that.onTopEdge = that.offSetY < that.MARGINS;
                that.onLeftEdge = that.offSetX < that.MARGINS;
                that.onRightEdge = that.offSetX >= that.boundRect.width - that.MARGINS;
                that.onBottomEdge = that.offSetY >= that.boundRect.height - that.MARGINS;

                that.rightScreenEdge = window.innerWidth - that.MARGINS;
                that.bottomScreenEdge = window.innerHeight - that.MARGINS;
            }
            // 返回
            return DragMoveManger;
        })();

        var dmm = new DragMoveManger();
        dmm.init({"id":"mypand"});
        dmm.adddiv({ "id": "ppm1" });
        dmm.adddiv({ "id": "ppm2" });
        dmm.onSelect = function (e) {
            //console.info(e);
        }
        dmm.onUnSelect = function (e) {
            //console.info(e);
        }

    </script>
</body>

</html>